<template>
<div class="cebian">
  <!-- 切换 -->
  <div>
    <router-view></router-view>
  </div>
  <div class="yyyl">
       <router-link to="/tuichu">退出</router-link>
    </div>
    
    <ul>
      <li>
        <router-link :to="{path:'/first',query:{id:1}}">第一页</router-link>
        <!-- {path:'Second',query:{id:2}} -->
      </li>
      <li>
        <router-link to="/second/2">第二页</router-link>
      </li>
      <li>
        <router-link to="/third/3">第三页</router-link>
      </li>
      <li>
        <router-link :to="{path:'/forth',query:{id:4}}">第四页</router-link>
      </li>
    </ul>

     
</div>

</template>
<script>
export default{
    name:'',
    data () {
        return {
            
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
    }
}
</script>
<style lang='less'  scoped>
.cebian{
  display: flex;
}
    ul{
        // display: flex;
      width: 200px;
      height: 600px;
      list-style:none;
  position: relative;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  background-color:aqua;
  li{
    font-size: 24px;
    color: black;
  }
 
    }
     .yyyl{
    width: 200px;
    height: 100px;
    font-size: 70px;
    background-color: slateblue;
    color: black;
  }
</style>
